<template>
    <div>
        <el-form ref="form" :model="processOccupation" label-width="80px">
            <el-form-item label="职位名称" class="custom-label">
                <el-input v-model="processOccupation.occupationName"></el-input>
            </el-form-item>
            <el-form-item label="职位类别" class="custom-label">
                <el-cascader
                    placeholder="职位类型"
                    :options="industry"
                    v-model="categoryValue"
                    :key="industry.industryId"
                    :label="industry.industryName"
                    :children="industry.categories"
                    :show-all-levels="false"
                    filterable
                    @change="handleCategoryChange"
                ></el-cascader>
            </el-form-item>
            <el-form-item label="职位所在城市" class="custom-label">
                <el-input
                    v-model="processOccupation.cityName"
                    placeholder="请选择职位所在城市"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="职位详细地址" class="custom-label">
                <el-input
                    v-model="processOccupation.occupationLocation"
                ></el-input>
            </el-form-item>
            <el-form-item label="职位所需学历" class="custom-label">
                <el-input
                    v-model="processOccupation.occupationDegree"
                ></el-input>
            </el-form-item>
            <el-form-item label="职位所需经验" class="custom-label">
                <el-input
                    v-model="processOccupation.occupationExperience"
                ></el-input>
            </el-form-item>
            <el-form-item label="职位薪水" class="custom-label">
                <el-input
                    v-model="processOccupation.occupationSalary"
                ></el-input>
            </el-form-item>
            <el-form-item label="职位概述" class="custom-label">
                <el-input
                    type="textarea"
                    v-model="processOccupation.occupationProfile"
                    class="custom-label"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-edit" @click="onSubmit"
                    >立即修改</el-button
                >
                <el-button
                    type="danger"
                    icon="el-icon-delete"
                    style="width: 125px"
                    @click="confirmDelete"
                    >删除</el-button
                >
                <el-button type="info" style="width: 125px" @click="onCancel"
                    >取消</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
let degree = require('@/assets/degree-code.json')
export default {
    data() {
        return {
            categoryValue: '',
            industry: {
                value: '',
                label: '',
                children: {
                    value: '',
                    label: ''
                }
            },
            form: {
                occupationName: '',
                occupationCity: '',
                occupationCategory: '',
                occupationLocation: '',
                occupationProfile: '',
                occupationDegree: '',
                occupationExperience: '',
                occupationSalary: ''
            },
            occupation: {
                occupationId: '',
                occupationName: '',
                occupationCategory: '',
                occupationCity: '',
                occupationLocation: '',
                occupationProfile: '',
                occupationDegree: '',
                occupationExperience: '',
                occupationSalary: '',
                occupationEnterprise: '',
                cityName: '',
                enterpriseName: '',
                enterpriseProfile: '',
                enterpriseLocation: '',
                enterpriseTel: '',
                categoryName: ''
            },
            originalOccupation: {}, // 保存初始职位信息
            occupationId: 0,
            occupationExperience: 0
        }
    },
    computed: {
        processOccupation() {
            let experienceText
            const experience = Number(this.occupation.occupationExperience)

            if (experience === 0) {
                experienceText = '不限'
            } else if (experience === -1) {
                experienceText = '应届生'
            } else {
                experienceText = experience + '年经验'
            }

            const degreeItem = degree.find(
                (item) => item.value === this.occupation.occupationDegree
            )
            const degreeText = degreeItem ? degreeItem.label : ''

            this.occupation.occupationExperience = experienceText
            this.occupation.occupationDegree = degreeText
            return this.occupation
        }
    },
    created() {
        this.occupationId = this.$route.query.occupationId
        this.fetchOccupationData() // 初始加载时获取职位信息
    },
    watch: {
        '$route.query.occupationId'(newVal) {
            this.occupationId = newVal
            this.fetchOccupationData() // 路由参数变化时重新获取职位信息
        }
    },
    mounted() {
        this.$axios.post('/category/allIndustryCategory').then((resp) => {
            this.industry = resp.data
        })
    },
    methods: {
        async fetchOccupationData() {
            try {
                const response = await this.$axios.get(
                    '/occupation/getOccupationByOccupationId',
                    {
                        params: { occupationId: this.occupationId }
                    }
                )
                this.occupation = response.data
                this.value = "'" + this.occupation.occupationCategory + "'"
            } catch (error) {
                console.error('Error fetching occupation data:', error)
            }
        },
        async onSubmit() {
            // 提交表单逻辑，可以在这里处理表单的提交操作
            console.log('提交的表单数据:', this.form)
            // 调用保存方法
            await this.saveOccupationData()
        },
        async saveOccupationData() {
            try {
                let experience = 0 // 默认值，可以根据实际情况修改
                const experienceText = this.occupation.occupationExperience
                // 根据经验文本来判断实际经验年限
                if (experienceText === '不限') {
                    experience = 0
                } else if (experienceText === '应届生') {
                    experience = -1
                } else {
                    // 从字符串中提取数字部分
                    experience = parseInt(experienceText, 10)
                }
                const postData = {
                    occupationId: this.occupationId,
                    occupationName: this.occupation.occupationName,
                    occupationCategory: this.occupation.occupationCategory,
                    occupationCity: this.occupation.occupationCity,
                    occupationLocation: this.occupation.occupationLocation,
                    occupationDegree: this.occupation.occupationDegree,
                    occupationExperience: this.occupation.occupationExperience,
                    occupationSalary: this.occupation.occupationSalary,
                    occupationProfile: this.occupation.occupationProfile
                }
                console.log(
                    '传过去的类别是多少' + this.occupation.occupationCategory
                )
                console.log(
                    '传过去的name是多少' + this.occupation.occupationName
                )
                console.log(
                    '传过去的城市是多少' + this.occupation.occupationCity
                )
                console.log(
                    '传过去的经验是多少' + this.occupation.occupationExperience
                )
                console.log(
                    '传过去的薪水是多少' + this.occupation.occupationSalary
                )
                // 发送 POST 请求保存数据
                const response = await this.$axios.post(
                    '/occupation/upOccupation',
                    postData
                )
                console.log('保存成功:', response.data)

                // 可以根据需要处理保存成功后的逻辑，例如提示用户保存成功
            } catch (error) {
                console.error('保存失败:', error)
                // 可以根据需要处理保存失败后的逻辑，例如提示用户保存失败
            }
        },

        async confirmDelete() {
            // 使用 Element UI 的 MessageBox 进行确认操作
            this.$confirm('确定删除该职位信息吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    // 用户点击了确定
                    this.deleteOccupationData()
                })
                .catch(() => {
                    // 用户点击了取消，不做任何操作
                })
        },
        async deleteOccupationData() {
            try {
                console.log('删除对应的职位编号:', this.occupationId)
                const response = await this.$axios.post(
                    '/occupation/deOccupationByOccupationId',
                    { occupationId: this.occupationId }
                )
                // 成功删除后可以跳转到其它页面，或者重新加载数据
                this.$router.push('/enterpriseInfoMg/EnterpriseInfoShow') // 假设跳转到职位列表页面
            } catch (error) {
                console.error('删除失败:', error)
            }
        },
        onCancel() {
            // 取消按钮点击事件，恢复表单数据为初始加载或上一次成功保存的职位信息
            this.form = { ...this.originalOccupation }
        }
    }
}
</script>


<style scoped>
/*.custom-label {*/
/*  font-size: 50px; !* 设置字体大小 *!*/
/*  font-family: 'Arial', sans-serif; !* 设置字体样式 *!*/
/*}*/
</style>